<template>
  <div class="app">

    <div class="shadow" v-show="shadowView">
      <i class="el-icon-loading" style="font-size: 50px;position:absolute;left: calc(50% - 25px);top:calc(50% - 25px)"></i>
    </div>
    <div class="box">
      <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" class="login-box">
        <el-form-item prop="username"><span class="inputTitle">账号</span>
          <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
        </el-form-item>
        <el-form-item prop="password"><span class="inputTitle">密码</span>
          <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
        </el-form-item>
        <el-form-item style="margin-top: 50px">
          <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import JumpAddress from "../common/myConfig"
export default {
  name: "Login",
  data () {
    return {
      shadowView: false,
      form: {
        username: '',
        password: ''
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },

      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit (formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.shadowView = true
          this.$axios.get("login",{params: _this.form}).then(res => {
            this.shadowView = false
            if (res.data.toString().trim()==""){
              this.$message.info("账户或密码错误")
              return;
            }
            localStorage.setItem("userInfo",JSON.stringify(res.data))
            this.$router.replace("/home")
          })
        } else {
          this.dialogVisible = true
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.shadow{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
  position: absolute;
  z-index: 10;
}
.app{
  height: calc(100% - 2px);border: 1px solid white;
  position: relative;
}
.box{
  width: 300px;margin: 150px auto;
}
.inputTitle{
  color: #5C657E;
}
</style>
